import React, { Component } from 'react'
// import store from './store'
import { connect } from 'react-redux'
import { getInputChangeAction, addTodoItemAction } from './store/actionCreators'
class App extends Component {
  /*  constructor(props) {
     super(props);
     this.state = store.getState()
     // store.subscribe(this.handleStoreChange)
 
   } */


  // handleStoreChange = () => {
  //   this.setState(store.getState())

  // }
  componentDidMount() {
    // const action = getInitList()
    // store.dispatch(action)
    // console.log(action);

    // store.dispatch(action)
  }
  render() {
    const { inputValue, list } = this.props;
    return (
      <div>
        <p><input value={inputValue} onChange={this.props.handleInputChange} placeholder="todo info" /><button onClick={() => this.props.handleClick(inputValue)}>提交</button></p>
        <ul>
          {list.map(item => <li key={item}>{item}</li>)}
        </ul>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}
const mapDispatchtoProps = (dispatch, props) => ({
  handleInputChange: (e) => {
    console.log(e.target.value);

    const action = getInputChangeAction(e.target.value)
    dispatch(action)
  },
  handleClick: (inputValue) => {
    // console.log(dispatch, props);

    const action = addTodoItemAction(inputValue)
    dispatch(action)
  }
})
export default connect(mapStateToProps, mapDispatchtoProps)(App)